<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>雪花</title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
			body{
				position: relative;
			}
			
			.snowFlower{
				width: 20px;
				height: 20px;	
				position: absolute;
			}
			
			.snowFlower img{
				width: 100%;
			}
		</style>
	</head>
	<body>
	</body>
	<script>
		var body = document.body;
	
		for ( var i = 0; i <　50; i++ ) {
			var snow = document.createElement('div');
			var snow_img = document.createElement('img');
			snow.classList.add('snowFlower');
			snow_img.src = 'img/snowFlower/snowflake.png';
			snow.appendChild(snow_img);
			body.appendChild(snow);
			snow.style.left = parseInt( Math.random()*-768 ) + 'px';
			snow.style.top = parseInt( Math.random()*768 ) + 'px';	
		}
		
		var snows = document.getElementsByClassName('snowFlower');
		
		var move = ()=> {
			for ( var j = 0; j < snows.length; j++ ) {
				snows[j].style.left = parseInt(snows[j].style.left) + 1 +'px';
				console.log(snows[j].style.left);
					 TEMP = parseInt(Math.random()*100);
			        if(TEMP%3==0){
			         snows[j].style.top = parseInt(snows[j].style.top)+1+'px' ;
			        }else{
			          snows[j].style.top = parseInt(snows[j].style.top)-1+'px' ;
			        }
			}
		}
		setInterval(move,20);
		
	</script>
</html>
